<template>
  <div>
    <Header></Header>
    <div style="padding: 50px;margin-left: 100px">
      <h1>Go语言课程</h1>
      <img src="http://photo.liuqingzheng.top/2023%2002%2022%2021%2057%2011%20/image-20230222215707795.png"
           height="300px"
           width="300px">
      <br>
      <el-button type="danger" @click="handleSeckill" v-loading.fullscreen.lock="fullscreenLoading">秒杀课程</el-button>
    </div>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


    <Footer></Footer>

  </div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'

export default {
  name: "SckillView",
  data() {
    return {
      fullscreenLoading: false,
      task_id: '',
      t: null,
    }
  },
  methods: {
    handleSeckill() {
      this.fullscreenLoading = true;
      this.$axios({
        url: 'http://127.0.0.1:8000/api/v1/home/seckill/seckill/',
        method: 'POST',
        data: {
          course_id: '99'
        }
      }).then(res => {
        // 在排队，转圈的，还需要继续显示
        this.$message.success(res.data.msg)
        this.task_id = res.data.task_id
        // 继续发送请求---》查询是否秒杀成功：1 成功 2 没成功  3 秒杀任务还没执行
        // 启动定时任务，没隔1s，向后端发送一次请求
        this.t = setInterval(() => {
          this.$axios({
            url: 'http://127.0.0.1:8000/api/v1/home/seckill/get_result/',
            method: 'get',
            params: {
              task_id: this.task_id
            }
          }).then(res => {
            // 100 成功,success : 1 成功  0 失败  2 还没开始
            if (res.data.success == '1') {
              // 转圈框不显示
              this.fullscreenLoading = false;
              // 停止定时任务
              clearInterval(this.t)
              this.t = null
              this.$message.success(res.data.msg)

            } else if (res.data.success == '0') {
              // 转圈框不显示
              this.fullscreenLoading = false;
              // 停止定时任务
              clearInterval(this.t)
              this.t = null
              this.$message.error(res.data.msg)
            } else {
              // this.$message.error(res.msg)
              console.log(res.msg)
            }
          })


        }, 1000)


      }).catch(res => {
        this.fullscreenLoading = false;
        this.$message.error(res)
      })
    }
  },
  components: {
    Header, Footer
  }
}
</script>

<style scoped>

</style>